<template>
  <el-dialog
    v-el-drag-dialog
    :title="'欠瓶明细'"
    :visible.sync="visible"
    width="1024px"
    @closed="reset"
  >
    <el-form ref="dataForm" class="form" :model="temp" label-position="right" label-width="110px">

      <el-form-item label="客户名称:" prop="csmName">
        <el-input v-model="temp.csmName" disabled />
      </el-form-item>
      <el-form-item label="联系电话:" prop="csmPhone">
        <el-input v-model="temp.csmPhone" disabled />
      </el-form-item>
      <!-- :value="typeMap(temp.corpSN)" -->
      <el-form-item label="客户类型:" prop="corpSN">
        <el-input :value="typeMap(1)" disabled />
      </el-form-item>
      <el-form-item style="width: 33.3%;" label="责任机构:" prop="orgName">
        <el-input v-model="temp.orgName" disabled />
      </el-form-item>
      <el-form-item style="width: 66%;" label="客户地址:" prop="csmAddress">
        <el-input v-model="temp.csmAddress" disabled />
      </el-form-item>
      <el-form-item style="width: 33%;" label="申请人:" prop="userName">
        <el-input v-model="temp.userName" disabled />
      </el-form-item>
      <el-form-item style="width: 33%;" label="欠瓶时间:" prop="startDt">
        <el-input :value="temp.startDt|getTime" disabled />
      </el-form-item>
      <el-form-item style="width: 33%;" label="预计还瓶时间:" prop="planBackDt">
        <el-input :value="temp.planBackDt|getTime" disabled />
      </el-form-item>
      <el-form-item style="width: 33%;" label="审核人:" prop="auditor:">
        <el-input v-model="temp.auditor" disabled />
      </el-form-item>
      <el-form-item style="width: 33%;" label="审核时间:" prop="auditDt:">
        <el-input :value="temp.auditDt|getTime" disabled />
      </el-form-item>
      <el-form-item style="width: 33%;" label="实际还瓶时间:" prop="endDt">
        <el-input :value="temp.endDt|getTime" disabled />
      </el-form-item>

    </el-form>
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      :total="tableData.total"
      style="width: 100%;"
      height="200"
      custom-column
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { queryMap, oweBottleDetail } from '@/api'
  import { parseTime } from '@/utils'
  export default {
    name: 'addBottle',
    filters: {
      getTime(value) {
        // if (!value) return
        if (value) {
          return parseTime(value, '{y}-{m}-{d} {h}:{i}:{s}')
        }
        return ''
      }
    },
    data() {
      return {
        visible: false,
        type: 'add',
        csmTypeMap: [],
        temp: {

        },
        tableData: {
          //  {title:'商品类型id',field:'gtId',hidden:true},
          //       {title:'商品id',field:'goodsId',hidden:true},
          //       {title:'商品类型',field:'gtName',width:100,align:'center',formatter:this.formatter.fontFormat},
          //       {title:'商品名称',field:'goodsName',width:180,align:'center',formatter:this.formatter.fontFormat},
          //       {title:'登记数量',field:'gdCount',width:80,align:'center',formatter:this.formatter.fontFormat},
          //       {title:'气瓶号',field:'recGPBMIDS',width:150,align:'center',formatter:this.formatter.fontFormat},
          //       {title:'芯片号',field:'recChipIDS',width:150,align:'center',
          column: [
            {
              prop: 'gtName',
              label: '商品类型',
              align: 'center',
              showOverflowTooltip: true
              // render: (h, { row }) => <span>{ '气瓶' }</span>
            },
            {
              prop: 'goodsName',
              label: '商品名称',
              align: 'center',
              width: 350,
              showOverflowTooltip: true
            },
            {
              prop: 'gdCount',
              label: '登记数量',
              align: 'center'
            },
            {
              prop: 'recGPBMIDS',
              label: '气瓶号',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              prop: 'recChipIDS',
              label: '芯片号',
              align: 'center',
              showOverflowTooltip: true
            }

          ],
          data: []
        }
      }
    },
    methods: {
      parseTime,
      typeMap(value) {
        // console.log(this)
        if (!value) return ''
        var obj = this.csmTypeMap.find(l => l.value === value)
        if (obj) {
          return obj.desc
        }
        return ''
      },
      open(temp) {
        return new Promise(async resolve => {
          if (this.csmTypeMap.length === 0) {
            await this.getCsmType()
          }
          this.resolve = resolve
          this.visible = true
          this.temp = temp
          // console.log(temp)
          this.tableData.data = [{ ...temp }]
          const param = {
            id: temp.id
          }
          const res = await oweBottleDetail(param)
          this.tableData.data = [...JSON.parse(res.data.detailList)]
          // console.log(this.goods)
        })
      },
      async getCsmType() {
        const res = await queryMap({ enumName: 'CustomerType' })
        this.csmTypeMap = res.data
      },
      reset() {
        this.type = 'add'
        this.temp = {
          select: 1,
          csmPhone: '',
          orderCode: '',
          csmName: '',
          address: '',
          addScores: '',
          price: '',
          time: '',
          remark: ''
        }
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 33%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  /deep/ .el-input-number {
    width: 100px;
    .el-input__inner {
      // padding:0;
      width: 100px;
    }
  }
  .block {
    width: 100%;
  }
}
.info-title {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
  .title-icon {
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 6px;
    background: $themeColor;
  }
  span {
    font-weight: 700;
    color: $themeColor;
  }
}
</style>
